﻿
@{
    ViewBag.Title = "月报";
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>中国铁塔油机管理系统-@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    @*<link rel="stylesheet" href="~/Content/css/frozenui.css">
        <link rel="stylesheet" href="~/Content/css/style.css">*@
    <link href="~/Content/css/weui.1.1.2min.css" rel="stylesheet" />
    <link href="~/Content/css/jquery-weui.css" rel="stylesheet" />
    @*<script src="~/Content/script/jquery-1.8.3.min.js"></script>*@
    <script src="~/Content/script/jquery-3.3.1.min.js"></script>
    <script src="~/Content/script/jweixin-1.4.0.js"></script>
    <script src="~/Content/script/jquery-weui.min.js"></script>
    <script src="~/Content/script/weui1.1.3.min.js"></script>
    <script src="~/Content/My97DatePicker/WdatePicker.js"></script>
    <script src="~/Content/script/date.format.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            position: relative;
            height: 100%;
        }

        li, a {
            list-style: none;
            text-decoration: none;
        }

        .swiper-container {
            width: 100%;
        }

        #nav {
            height: 40px;
            background: #fff;
        }

            #nav .swiper-wrapper {
                margin: 0;
                height: 40px;
                line-height: 40px;
            }

            #nav li {
                text-align: center;
                color: #474747;
            }

                #nav li span {
                    color: red;
                }

            #nav .active-nav {
                color: #55A5C3;
            }

        #tableHeader {
            height: 40px;
        }

            #tableHeader table {
                width: 100%;
                height: 40px;
                color: #fff;
                font-size: 15px;
            }

                #tableHeader table th:nth-child(even) {
                    background: #4FC2A1;
                }

                #tableHeader table th:nth-child(odd) {
                    background: #334960;
                }


        #page {
            position: absolute;
            top: 86px;
            left: 0;
            right: 0;
            bottom: 5px;
            overflow: hidden;
        }

            #page .swiper-slide {
                text-align: center;
                font-size: 30px;
                overflow-y: scroll;
                position: relative;
            }

        .dropload-down {
            display: none;
        }

        #page table {
            background: #fff;
        }

        #page .swiper-slide table {
            width: 100%;
        }

        #page table tr:nth-child(even) {
            background: #F8F8F8;
        }

        #page tr td {
            font-size: 16px;
            color: #000;
            padding: 10px 0;
            font-family: "微软雅黑";
        }

            #page tr td:nth-child(2), #page tr td:nth-child(3), #page tr td:nth-child(4) {
                width: 20%;
            }

            #page tr td:nth-child(1) {
                width: 35%;
            }

        #seacher {
            display: flex;
            justify-content: space-between;
            padding: 6px 8px;
            background: #E3E3E5;
            height: 33px;
            box-sizing: content-box;
        }

            #seacher select {
                width: 25%;
                border-radius: 5px;
                border: none;
                outline: none;
                box-sizing: border-box;
                background: #fff;
                padding-left: 6px;
                height: 33px;
            }

            #seacher input {
                width: 72%;
                background: #fff;
                border: none;
                border-radius: 5px;
                outline: none;
                box-sizing: border-box;
                padding: 0 10px;
                text-align: center;
                height: 33px;
            }

            #seacher button {
                width: 20%;
                border-radius: 5px;
                border: none;
                background: #4FC2A1;
                color: #fff;
                outline: none;
                height: 33px;
            }

                #seacher button img {
                    width: 0.7rem;
                    vertical-align: text-bottom;
                }
    </style>
</head>
<body>
    <div id="seacher">
        @*<input id="BaseStationName" type="text" placeholder="基站名称">*@
        @*<input type="text" data-toggle='date' id="my-input" value="" />*@
        <input id="Mon" class="Wdate" type="text" placeholder="选择月份" readonly="readonly" onfocus="WdatePicker({dateFmt:'yyyy年MM月'}) " />
        <button id="Search"><img src="~/Content/image/search (1).png" alt="">&nbsp;&nbsp;搜索</button>
    </div>
    <div id="tableHeader">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th width="35%">区域</th>
                <th width="20%">总共单</th>
                <th width="20%">已完成</th>
                <th width="20%">未接单</th>
            </tr>
        </table>
    </div>
    <div class="swiper-container" id="page">
        <div class="swiper-wrapper">
            <div class="swiper-slide slidepage">
                @*退服*@
                <table cellpadding="0" cellspacing="0" id="DailyList">
                </table>
            </div>

        </div>
    </div>
</body>
</html>
<script>

    DailyList("", 2);//初始化


    $("#Search").click(function () {
        if ($("#Mon").val() == "") {
            $.alert("请选择月份再进行搜索", "提示");
            return;
        }
        var day = getMonthLastDay($("#Mon").val());
        DailyList(day, 2);
    })

    //获取选择月份月尾日期
    function getMonthLastDay(date) {
        var year = date.substring(0, 4);
        var month = date.substring(5, 7);
        var firstDay = new Date(year, month - 1, 1);//这个月的第一天
        var currentMonth = firstDay.getMonth(); //取得月份数
        var lastDay = new Date(firstDay.getFullYear(), currentMonth + 1, 0);//是0而不是-1
        firstDay = firstDay.format("Y/m/d");//格式化
        lastDay = lastDay.format("Y/m/d");//格式化
        return lastDay;
    }

    function DailyList(date, type) {
        var datalist = "";
        $.ajax({
            url: '/api/Info/GetAnnouceCountByArea',
            type: 'get',
            data: { "date": date, "type": type },
            beforeSend: function () {
                $.showLoading("加载中...");
            },
            error: function (res) {
                $.hideLoading();
                $.alert(eval(data), "提示");
            },
            success: function (res) {
                $.hideLoading();
                //var data = JSON.parse(res);
                var data = res.Data;
                if (data.Code == 1) {
                    var Info = data.Result;
                    Info.forEach(function (d, i) {
                        datalist += "<tr><td>" + d.AreaName + "</td><td>" + d.AllAnnouceCount + "</td><td>" + d.FiAnnnouceCount + "</td><td>" + d.noExtAnnouceCount + "</td></tr>";
                    });
                    $("#DailyList").html(datalist);
                    datalist = "";
                } else {
                    $.alert(data.Result, "提示");
                }
            }
        })
    }
</script>
